<template>
  <div class="subscribeHose">
      <basic-container>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="预约日期:" style="margin-right: 40px;">
                    <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    range-separator="~"
                    start-placeholder="入场开始时间"
                    end-placeholder="入场结束时间"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                >
            </el-date-picker>
            </el-form-item>
            <el-form-item label="房屋类型:" style="margin-right: 40px;">
                <el-select v-model="formInline.buildingType" placeholder="请选择房屋类型">
                    <el-option v-for="item in buildingType" :key="item.id" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司名称:">
                <el-input v-model="formInline.companyName" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <div>
                <el-form-item>
                    <el-button type="primary" @click="inquire" >查询</el-button>
                    <el-button type="primary" @click="replay">重置</el-button>
                    <el-button type="primary" @click="exportExcel">导出</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
            prop="orderNumber"
            label="预约单号"
            >
            </el-table-column>
            <el-table-column
            prop="companyName"
            label="公司名称"
            >
            </el-table-column>
            <el-table-column
            label="房屋类型">
                <template slot-scope="scope">
                    {{scope.row.buildingType | isBuildingType}}
                </template>
            </el-table-column>
            <el-table-column
            prop="appointmentName"
            label="联系人">
            </el-table-column>
            <el-table-column
            prop="appointmentPhone"
            label="联系方式">
            </el-table-column>
            <el-table-column
            prop="appointmentDate"
            label="预约时间">
            </el-table-column>
            <el-table-column
            prop="status"
            label="预约状态">
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="showDetailAndEdit(scope.row)">查看</el-button>
                <el-button type="text" v-if="scope.row.status==='0'" @click="orderReceiving(scope.row.id,1)">接单</el-button>
                <el-button type="text" v-else-if="scope.row.status==='1'" @click="orderReceiving(scope.row.id,2)">结单</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="current"
            :page-sizes="[10, 20, 40, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            >
        </el-pagination>
        <el-dialog
            title="预约详情"
            :visible.sync="isdetailAndEdit"
            width="60%"
            top="1vh"
            :before-close="handleClose"
            :close-on-click-modal="false"
            :destroy-on-close='true'
            :close-on-press-escape="false">
            <div class="reservation">
                <h2>预约单号：{{reservation.orderNumber}}</h2>
                <div class="">
                    <el-button type="primary" style="margin-right: 10px;" @click="orderReceiving(reservation.id,1)">接单</el-button>
                    <el-button type="primary" @click="statementAccount">结单</el-button>
                </div>
            </div>
            <div class="Housing-Information">
                <h2>房屋信息</h2>
                 <el-table
                    :data="hoseData"
                    border
                    style="width: 100%">
                    <el-table-column
                    label="房屋类型"
                    >
                        <template slot-scope="scope">
                            {{scope.row.buildingType | isBuildingType}}
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="projectNumber"
                    label="房屋编号"
                   >
                    </el-table-column>
                    <el-table-column
                    label="房屋区域">
                        <template slot-scope="scope">
                                {{scope.row.projectRegionStage}}期{{scope.row.projectRegionId}}号楼
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="projectFloorNumber"
                    label="楼层">
                    </el-table-column>
                    <el-table-column
                    prop="projectName"
                    label="房号">
                    </el-table-column>
                    <el-table-column
                    prop="projectArea"
                    label="面积(m²)">
                    </el-table-column>
                    <el-table-column
                    prop="projectUnitPrice"
                    label="租金单价">
                        <template slot-scope="scope">
                                {{scope.row.projectUnitPrice}}元/m².月
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="particulars"> 
               <h2>操作日志</h2>  
                <el-timeline :reverse="reverse">
                    <el-timeline-item
                        v-for="(item, index) in activities"
                        :key="index"
                        :timestamp="item.updateDate">
                        {{item.modifyContent}}
                    </el-timeline-item>
                </el-timeline>        
            </div>
        </el-dialog>
        <el-dialog
            title="结单"
            :visible.sync="isStatementAccount"
            width="30%"
            top="1vh"
            :before-close="StatementAccountClose"
            :close-on-click-modal="false"
            :destroy-on-close='true'
            :close-on-press-escape="false">
            <el-form :label-position="labelPosition" label-width="80px" ref="accountBillRef" :model="accountBill">
                <el-form-item label="结单时间" prop="endTime" required>
                     <el-date-picker type="date"  value-format="yyyy-MM-dd" placeholder="选择日期" v-model="accountBill.endTime" style="width: 60%;" required></el-date-picker>
                </el-form-item>
                <el-form-item label="结单原因" prop="endCause" required>
                    <el-select v-model="accountBill.endCause" placeholder="请选择结单原因" style="width: 60%;">
                        <el-option label="客户取消" value="客户取消"></el-option>
                        <el-option label="带看完成" value="带看完成"></el-option>
                        <el-option label="预约结束" value="预约结束"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" style="width:60%">
                    <el-input type="textarea" v-model="accountBill.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="appointment">确定</el-button>
                    <el-button type="primary" @click="StatementAccountClose">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
      </basic-container>
  </div>
</template>

<script>
import { dictList,getTabelList,orderReceiving,HousingInformation,sysoperationlog } from '@/api/market/estate/subcribeHose'
import { ExportFile } from '@/api/common.js'
export default {
    data(){
        return{
            options:[], //全部公司的数组
            chooesCompanyId:'', //选中公司的id
            formInline:{
                current:1,
                size:10
            }, //查询条件
            tableData:[],
            labelPosition: 'right',
            buildingType:[],
            total:0,
            current:1,
            date:[],
            isdetailAndEdit:false,
            reverse:false,
            activities:[],
            reservation:{},
            hoseData:[],
            isStatementAccount:false,
            accountBill:{},
            endTime:'',
        }
    },
    filters:{
        isBuildingType(val){
           if(val==='complex_building'){
               return '综合楼'
           }
           if(val==='exhibition'){
               return '展场'
           }
           if(val==='exclusive_shop'){
               return '形象店'
           }
           if(val==='Automobile 4S'){
               return '4s店'
           }
           if(val==='virtualhouse'){
               return '"虚拟房产"'
           }
        }
    },
    created(){
        this.getDictList()
        this.gettabelList()
    },
    methods:{
        exportExcel(){
            //导出
            let url ='/estate/appointment/export'
            ExportFile(url,this.formInline)
        },
        statementAccount(){
            //打开结单弹窗
            this.isStatementAccount=true
        },
        replay(){
            this.date=[]
            this.formInline={
                current:1,
                size:10
            }
            this.gettabelList()
        },
        appointment(){
            this.$refs.accountBillRef.validate(async(valid) => {
                if (valid) {
                    let id =this.reservation.id
                    // console.log(id);
                    this.accountBill.id=id
                    this.accountBill.type=2
                    // console.log(this.accountBill.endTime);
                    const {data:res} = await orderReceiving(this.accountBill)
                    if(res.code===0){
                        this.$message.success('结单成功！')
                        this.isStatementAccount=false
                        this.isdetailAndEdit=false
                        this.gettabelList()
                    }
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            })
            
        },
        StatementAccountClose(){
            //关闭结单弹窗
            this.isStatementAccount=false
            this.accountBill={}
        },
        async showDetailAndEdit(row){
            //打开弹窗
            try{
                this.reservation = row
                // console.log(this.reservation);
                this.isdetailAndEdit=true
                let id = {
                    id:this.reservation.id
                }
                const {data:res} = await HousingInformation(id)
                if(res.code === 0){
                    this.hoseData = res.data.projects
                }
                const {data:e}  = await sysoperationlog(this.reservation.id)
                if(e.code===0){
                    this.activities=e.data
                    // console.log(this.activities);
                }
            }catch(error){
                this.$message.error(error)
            }
        },
        handleClose(){
            //关闭弹窗
            this.isdetailAndEdit=false

        },
        inquire(){
            //查询
            // console.log(this.formInline.date);
            this.gettabelList()
        },
        async getDictList(){
            try{
                let type =  'rm_project_buiding_type'
                const {data:res} = await dictList(type)
                // console.log(res.data);
                if(res.code===0){
                    this.buildingType = res.data
                }else{
                    this.$message.error(res.msg)
                }
                // console.log(this.buildingType);
            }catch (error){
                this.$message.error(error)
            }
        },
        async gettabelList(){
            try {
                if(this.date){
                this.formInline.startAppDate=this.date[0]
                this.formInline.endAppDate=this.date[1]
                }
                const {data:res} = await getTabelList(this.formInline)
                // console.log(res);
                this.tableData=res.data.records
                this.total=res.data.total
            } catch (error) {
                this.$message.error(error)
            }
        
        },
        async orderReceiving(id,val){
            try{
                let xxx ={
                    id,
                    type:val
                }
                if(val===1){
                     const {data:res} = await orderReceiving(xxx)
                     if(res.code===0){
                        this.$message.success('接单成功')
                     }
                     this.gettabelList()
                }else{
                    this.isStatementAccount=true
                    this.reservation.id=id
                }   
            }catch (error) {
                this.$message.error(error)
            }
            
        },
        sizeChange(val){
            this.formInline.size=val
            this.gettabelList()
        },
        currentChange(val){
             this.formInline.current=val
             this.gettabelList()
        }
    }
}
</script>

<style lang='scss' scoped>
.reservation{
    display: flex;
    justify-content: space-between;
}
</style>